import React, { useEffect, memo } from 'react';
import { useLocation } from 'umi';
import { Provider } from 'react-redux';
import { MenuBar, ErrorBoundary } from '@/components';
import store from '@/stores';

const Layouts: React.FC = props => {
  const location = useLocation();
  const paths = ['/', '/order', '/user'];

  useEffect(() => {
    window.scrollTo(0, 0);
  }, [location.pathname]);

  return (
    <Provider store={store}>
      <ErrorBoundary>
        <MenuBar
          show={paths.includes(location.pathname)}
          pathname={location.pathname}
        />
        {props.children}
      </ErrorBoundary>
    </Provider>
  );
};

export default memo(Layouts);
